<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">帮我送</div>
    </v-ons-toolbar>
    <div class="container">

      <div class="list">
        <div class="list-function-item">
          <div class="left">
            <textarea v-model="wareInfo" placeholder="请输入需要的商品"></textarea>
            <div class="label-group">
              <div class="label-item" v-for="item in 3" @click="addLabel({item:item})">
                标签{{item}}
              </div>
            </div>
          </div>
          <div class="right">
            <div class="multi-media-group">
              <div class="multi-media-item">
                <img class="icon" src="../../assets/resource/consumer/order/b-icon1.png" alt="">
              </div>
              <div class="multi-media-item">
                <img class="icon" src="../../assets/resource/consumer/order/b-icon2.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 地址选择 -->
      <div class="list">
        <div class="list-address-item">
          <div class="left">
            <img class="icon" src="../../assets/resource/consumer/order/b-icon0.png" alt="">
          </div>
          <div class="center">
            <div>
              <input type="text" placeholder="点击选择购买地址" readonly>
            </div>
            <div>
              <input type="text" placeholder="请输入详细地址，如楼层门牌号">
            </div>
          </div>
          <div class="right">
            <img class="icon" src="../../assets/resource/consumer/order/icon11.png" alt="">
          </div>
        </div>

        <div class="list-address-item">
          <div class="left">
            <img class="icon" src="../../assets/resource/consumer/order/b-icon4.png" alt="">
          </div>
          <div class="center">
            <div>
              <input type="text" placeholder="点击选择购买地址" readonly>
            </div>
            <div>
              <input type="text" placeholder="请输入详细地址，如楼层门牌号">
            </div>
          </div>
          <div class="right">
            <button class="btn">常用</button>
          </div>
        </div>
      </div>

      <!-- 时间选择 -->
      <div class="list">
        <div class="list-item" @click="showTimePicker">
          <div class="left">
            <img class="icon" src="../../assets/resource/consumer/order/icon8.png" alt="">
            <span>配送时间</span>
          </div>
          <div class="right">
            <p class="picker">
              <span v-for="(timeItem,index) in time" v-if="time != ''">{{timeItem.value}} </span>
              <span v-if="time == ''">请选择地区 </span>
              <span class="fa fa-caret-down picker-icon"></span>
            </p>
          </div>
        </div>
      </div>

      <!-- 议价 | 折扣| 抵现 -->
      <div class="list">
        <div class="list-item">
          <label for="switch1" class="left">
            <img class="icon" src="../../assets/resource/consumer/order/icon7.png" alt="">
            <span>议价</span>
          </label>
          <div class="right">
            <v-ons-switch class="switch" input-id="switch1"></v-ons-switch>
          </div>
        </div>

        <div class="list-item">
          <label for="switch2" class="left">
            <img class="icon" src="../../assets/resource/consumer/order/icon14.png" alt="">
            <span>会员折扣</span>
          </label>
          <div class="right">
            <v-ons-switch class="switch" input-id="switch2"></v-ons-switch>
          </div>
        </div>

        <div class="list-item">
          <label for="switch3" class="left">
            <img class="icon" src="../../assets/resource/consumer/order/icon15.png" alt="">
            <span>积分抵现</span>
          </label>
          <div class="right">
            <v-ons-switch class="switch" input-id="switch3"></v-ons-switch>
          </div>
        </div>
      </div>

      <!-- 重量 -->
      <div class="list">
        <div class="list-weight-item">
          <v-ons-range class="range-input" v-model="weight"></v-ons-range>
          <p>货物重量：<span>{{weight}} kg</span></p>
        </div>
      </div>

      <!-- 小费 | 红包 | 留言 -->
      <div class="list">
        <div class="list-item">
          <div class="left">
            <img class="icon" src="../../assets/resource/consumer/order/icon6.png" alt="">
            <span>小费</span>
          </div>
          <div class="right">
            <NumberInputSpinner
              class="number-input-spinner"
              :integerOnly="true"
              :min="0"
              :max="99999"/>
          </div>
        </div>

        <div class="list-item" @click="showCouponPicker">
          <div class="left">
            <img class="icon" src="../../assets/resource/consumer/order/icon5.png" alt="">
            <span>优惠券</span>
          </div>
          <div class="right">
            <p class="picker">
              <span>{{coupon != '' ? coupon.value : '请选择'}} </span>
              <span class="fa fa-caret-down picker-icon"></span>
            </p>
          </div>
        </div>

        <div class="list-item">
          <div class="left">
            <img class="icon" src="../../assets/resource/consumer/order/icon9.png" alt="">
            <span>留言</span>
          </div>
          <div class="right">
            <input placeholder="请输入留言"></input>
          </div>
        </div>
      </div>

      <div class="linked" @click="linkedChecked = !linkedChecked">
        <span class="fa fa-check-circle-o circle-radio" :class="linkedChecked ? 'circle-radio-checked' : ''"></span>
        我已阅读并同意
        <span class="linked-color">《代买跑腿服务协议》</span>
      </div>

      <div class="bottom-menu">
        <div class="left">共 <span>60</span> 元</div>
        <div class="center" @click="enterPage({path:'/ConsumerLargessPriceBreakdown'})">费用明细 ></div>
        <div class="right">立即下单</div>
      </div>

    </div>

    <awesome-picker
      ref="timePicker"
      :data="timePicker.data"
      @confirm="handleTimePickerConfirm">
    </awesome-picker>

    <awesome-picker
      ref="couponPicker"
      :data="couponPicker.data"
      @confirm="handleCouponPickerConfirm">
    </awesome-picker>

  </v-ons-page>
</template>

<script>
  import NumberInputSpinner from 'vue-number-input-spinner'

  export default {
    components: {
      NumberInputSpinner,
    },
    data() {
      return {
        wareInfo: '',
        spinner: '',
        time: '',
        coupon: '',
        timePicker: {
          anchor: [],
          textTitle: '优惠券选择器',
          data: [
            {
              value: "2018-7-26",
              children: [
                {
                  value: '1:00',
                },
                {
                  value: '2:00',
                }
              ]
            },
            {
              value: "2018-7-27",
              children: [
                {
                  value: '1:00',
                },
                {
                  value: '2:00',
                },
                {
                  value: '3:00',
                }
              ]
            }
          ]
        },
        couponPicker: {
          anchor: [],
          textTitle: '优惠券选择器',
          data: [
            {
              value: "5块钱"
            }
          ]
        },
        linkedChecked: true,
        weight:0,
      }
    },
    methods: {
      enterPage({path: path, actionSheet: actionSheet}) {
        if (actionSheet) {
          this.actionSheetVisible = false
        }
        this.$router.push({
          path: path
        });
      },
      // 添加标签
      addLabel({item: item}) {
        if (this.wareInfo.toString().trim() == '') {
          this.wareInfo = item;
        } else {
          this.wareInfo += ',' + item;
        }
      },
      // 时间
      handleTimePickerConfirm(v) {
        let value = v ? v : null;
        if (value) {
          this.time = value;
        }
      },
      showTimePicker() {
        this.$refs.timePicker.show()
      },
      //  优惠券
      handleCouponPickerConfirm(v) {
        let value = v ? v[0] : null;
        if (value) {
          this.coupon = value;
        }
      },
      showCouponPicker() {
        this.$refs.couponPicker.show()
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/largess.less";
</style>
